實驗：建立 API Gateway-using mock

目錄

• 啟動學習者實驗室
• 準備開發環境
• 建立 API 端點 GET
• 部署 API
• 更新網站並使用 API
• 參考資料

以下實驗是在網頁中使用 AJAX 呼叫 API Gateway

啟動學習者實驗室

AWS Academy Learner Lab 是提供一個帳號讓學生可以自行使用 AWS 的服務，讓學生可以在 50 USD的金額下，自行練習所要使用的 AWS 服務，在此先介紹一下 Learner Lab 基本操作與限制。
在 AWS Academy 學習平台 的入口首頁 https://www.awsacademy.com/LMS_Login ，選擇以學生 (Students) 身分登錄，在課程選單中選擇 AWS Academy Learner Lab - Foundation Services 的課程，在課程選單中選擇 單元 (Module)，接著單擊 啟動 AWS Academy Learner Lab，如下圖所示。

圖 1. 啟動 AWS Academy Learner Lab

進入 Learner Lab 中，說明一下每個區塊，圖形在下方。

1. 用來啓動 AWS 管理控制台介面，必須是出現綠點才可以點擊，而出現綠點必須要先啓動實驗 (Start Lab)
2. 已用金額與全部實驗金額 (Used $0.2 of $50)。
3. 工具列說明：
   • 『Start Lab』：開始實驗帳號，這時候就可以使用 AWS 資源。
   • 『End Lab』：就會停止計費，並把所有的 AWS 資源關閉，注意，這只是暫停這些資源，並不會回收。
   • 『AWS Details』：使用者(IAM 用戶)相關的密鑰資料可以從來取得。
   • 『Readme』：說明手冊，就是下方的 5.。
   • 『Reset』：就會把目前所有的 AWS 設定好的資源都清除掉。
4. 切換說明的語系，ZH-CN 是簡體中文。
5. 說明手冊。

圖 2. Learner Lab 畫面說明

準備開發環境

事先完成 實驗：使用 Amazon S3建立靜態網站 ，並進入 Cloud9 的環境中，打開 lab/website/index.html ，等一下需要修改這個檔案，讓它指向 API Gateway

檢查 Cloud9 開發環境的套件版本

參考以下 AWS CLI 指令，使用 Amazon S3 建立靜態網站

git clone https://github.com/yehchitsai/AIoTnAWSCloud
aws s3api create-bucket --bucket aiotnawscloud0821

圖 3. 進入 Cloud9 畫面

建立 API 端點 (GET)

建立API前應該先定義好API規格，以下是我們要建立API的格式

上傳參數規格：無

回傳欄位說明

打開 API Gateway 控制台，點擊 建立 API，選擇建置 REST API

圖 4. 建置 REST API

建立 REST API 配置

• 新 API：建立新的 REST API
• API 名稱： dateAPI
• API 端點類型：區域

圖 5. 建立 REST API 配置

建立資源

建立 dateAPI REST API 的資源 DateInfo，可以不用開啟CORS。

圖 6. 建立 REST API 資源

建立方法

在資源 DateInfo 下新增一個 GET 方法

圖 7. 建立 REST API 資源下的 get 方法

指定方法的整合類型為模擬(mock)

圖 8. 方法的整合類型

方法回應

編輯方法回應，因為要支援 CORS ，所以回應時必需有這三個回應標頭。

• Access-Control-Allow-Headers
• Access-Control-Allow-Origin
• Access-Control-Allow-Methods

圖 9. 編輯方法回應

整合回應
編輯整合回應，設定要傳給方法回應的內容，所以需要指定標頭映射與映射範本：
標頭映射如下所示：
注意：mapping value 需要加上單引號

• Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
• Access-Control-Allow-Methods: 'GET'
• Access-Control-Allow-Origin: '*'

映射範本內容

{
	"date": "2024-08-23",
	"time": "08:16:17"
}

圖 10. 編輯整合回應

測試

最後選擇測試觀看結果，如果正確會回應狀態200，以及指定的回應內文與回應標頭。

圖 11. 對於設定好的方法進行測試

部署 API

在左側的資源選單中，可以找到資源畫面的右上方有 部署 API 按鈕，點擊後選擇新階段，階段名稱為 dev 後，進行部署。

圖 12. 部署 API

完成部署後，選擇階段選單，找到叫用URL，並複製起來。

圖 13. 複製所需的 API 端點

將叫用URL貼在空白瀏覽器上，在瀏覽器上上測試 API 資源，如果出現日期資料，即表示 API Gateway 部署成功。

圖 14. 在瀏覽器上上測試 API 資源

更新網站並使用 API

回到 cloud9 畫面中，修改 index.html 第 8 行，將上一階段所得到的 API 端點，指定給API_GW_BASE_URL_STR

# 將
API_GW_BASE_URL_STR: null
# 改為
API_GW_BASE_URL_STR: [API_ENDPOINT]

再將該網頁上傳到 S3 上，在下方的終端畫面輸入以下指令：

aws s3 cp AIoTnAWSCloud/lab/website/index.html s3://aiotnawscloud0821/

圖 15. 修改相對應程式碼

進入 S3 控制台，找到 index.html 所在的網址，通常是

https://[bucketname].s3.amazonaws.com/[object]

圖 16. 檢視 index.html 網址

打開 index.html 網址並點擊 Load Information，可以看到下方會出現 ajax 呼叫 API Gateaway，來取得資料，並顯示在畫面上。

圖 17. 檢視網頁運作

參考資料

• AWS Command Line Interface, https://aws.amazon.com/tw/cli/
• AWS Academy, https://aws.amazon.com/cn/training/awsacademy/
• AWS Academy 簡介， https://blog.csdn.net/m0_50614038/article/details/123778237
• AWS Academy LMS (Learning Management System) 基礎 – 教師, https://blog.csdn.net/m0_50614038/article/details/123778561
• AWS Academy LMS 申請開課 － 教師, https://blog.csdn.net/m0_50614038/article/details/123778838
• AWS Academy LMS 新增學生 － 教師, https://blog.csdn.net/m0_50614038/article/details/123779068